<script setup>
import {ref} from "vue";
import http from "@/request/http.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Back} from "@element-plus/icons-vue";

const user = ref({
  'username': '',
  "password": '',
  'email': '',
  "age": '',
  "gender": '',
  "briefly": '',
  'emailCode': ''
});
const pwdAgain = ref('')
const formRef = ref()
//表单规则
//自定义年龄规则
const ageValidate = (rule, value, callback) => {
  if (value) {
    if (value <= 0 || value > 150) {
      return callback(new Error("请输入正确数字"))
    }
  }
  callback()
}
//规则列表
const rules = {
  "username": [
    {required: true, message: "不可为空"},
    {min: 2, max: 20, message: "长度至少在2-20之间"}
  ],
  "password": [
    {required: true, message: "不可为空"},
    {pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,}$/, message: "至少8位数且包含字母、数字"}
  ],
  "age": [
    {validator: ageValidate}
  ],
  "email": [
    {required: true, message: "不可为空"},
    {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: "邮箱格式错误"}
  ],
  "briefly": [
    {max: 80, message: "字数过长"}
  ],
  "emailCode": [
    {required: true, message: "不可为空", target: "blur"}
  ]
}
// 发送邮件按钮信息
const sendButtonText = ref('发送验证码')
const btnDisable = ref(false)

//注册
const register = () => {
  formRef.value.validate(async val => {
    if (val) {
      //判断两次密码是否一致
      if (user.value.password !== pwdAgain.value) {
        ElMessage.error("两次密码不一致")
        return
      }

      const dataVo = await http.post("/user/register", user.value)
      let code = dataVo.code
      if (code === 200) {
        ElMessage.success("注册成功")
        router.push("/login").then()
      } else {
        ElMessage.error(dataVo.msg)
      }
    } else {
      ElMessage.error("请正确填写表单")
    }
  })
}

//发送邮箱验证码
const sendEmailCode = () => {
  formRef.value.validateField("email", async val => {
    if (val) {
      const data = await http.get("/email/getEmailCode?email=" + user.value.email)
      if (data.code === 200) {
        ElMessage.success("发送成功")
        disableSend()
      } else {
        ElMessage.error(data.msg)
      }
    }
  })
}

//禁用按钮3分钟
const disableTime = 180
const disableSend = () => {
  let time = disableTime
  btnDisable.value = true
  sendButtonText.value = "已发送" + time
  const id = setInterval(() => {
    if (time <= 0) {
      sendButtonText.value = "发送验证码"
      btnDisable.value = false
      clearInterval(id)
      return
    }
    time--
    sendButtonText.value = "已发送" + time
  }, 1000)
}

</script>

<template>
  <div id="register-box">
    <el-form ref="formRef" :model="user" :rules="rules" class="register-form">
      <el-icon class="back" size="20" @click="router.push('/')">
        <Back/>
      </el-icon>
      <h1 class="form-title">注册账号</h1>
      <el-form-item label="昵称:" label-position="left" label-width="80px" prop="username">
        <el-input v-model="user.username" class="el-input"/>
      </el-form-item>
      <el-form-item label="密码:" label-position="left" label-width="80px" prop="password">
        <el-input v-model="user.password" class="el-input" type="password"/>
      </el-form-item>
      <el-form-item label="确认密码:" label-position="left" label-width="90px" prop="password">
        <el-input v-model="pwdAgain" class="el-input" type="password"/>
      </el-form-item>
      <el-form-item label="年龄:" label-position="left" label-width="80px" prop="age">
        <el-input v-model="user.age" :max="150" :min="0" class="el-input" type="number"/>
      </el-form-item>
      <el-form-item label="性别:" label-position="left" label-width="80px" prop="sex">
        <el-select v-model="user.gender">
          <el-option label="保密" value=0></el-option>
          <el-option label="男" value=1></el-option>
          <el-option label="女" value=2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱:" label-position="left" label-width="80px" prop="email">
        <el-input v-model="user.email" class="el-input"/>
      </el-form-item>
      <el-form-item label="验证码:" label-position="left" label-width="80px" prop="emailCode">
        <el-input v-model="user.emailCode" class="el-input,email-code" style="width: 60%"/>
        <el-button :disabled="btnDisable"
                   class="send-email-btn"
                   type="default"
                   @click="sendEmailCode">
          {{ sendButtonText }}
        </el-button>
      </el-form-item>
      <el-form-item label="简介:" label-position="left" label-width="80px" prop="briefly">
        <el-input v-model="user.briefly" class="el-input" type="textarea"/>
      </el-form-item>
      <el-button class="register-button" type="primary" @click="register">
        注册
      </el-button>
      <router-link to="/pwdLogin">
        <el-button class="pwd-button" type="default">
          密码登录
        </el-button>
      </router-link>
    </el-form>
  </div>
</template>

<style scoped>
.register-form {
  padding: 60px;
  height: 100%;
  overflow: auto;
  scrollbar-width: none; /* Firefox 专用：隐藏滚动条 */
}

#register-box {
  width: 480px;
  height: 90vh;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  /* 柔和阴影 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
  transition: transform 0.3s ease-in-out;
}

#register-box:hover {
  transform: translateY(-5px); /* 鼠标悬停时轻微上浮 */
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 35px;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

/* 按钮样式 */
.register-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  background-color: #E8770F;
  border-color: #E8770F;
  transition: all 0.3s ease-in-out;
}

.register-button:hover {
  transform: scale(1.02);
  background-color: #f8a050;
  border-color: #f8a050;
}

.pwd-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}

.pwd-button:hover {
  transform: scale(1.02);
  border-color: #f8a050;
  color: #f8851e;
  background-color: #faf0e6;
}

.el-input {
  height: 40px;
}


.send-email-btn {
  height: 40px;
  width: 40%;
}

.send-email-btn:hover {
  border-color: #f8a050;
  color: #f8851e;
  background-color: #faf0e6;
}

.back {
  transition: all 0.15s linear;
}

.back:hover {
  transform: scale(1.2);
}

</style>